<template>
  <Layout class="p-5 bg-white">
    <Form :label-width="80">
      <FormItem class="w-50" label="角色名">
        <Input v-model="role.roleName" placeholder="请输入角色的名称"></Input>
      </FormItem>

      <FormItem class="w-50" label="权限">
        <Tree    :data="allPermissions"   show-checkbox multiple></Tree>
      </FormItem>

      <FormItem class="text-right">
        <Button @click="submit" type="primary">提交</Button>
        <Button @click="cancel" class="ml-2">取消</Button>
      </FormItem>
    </Form>
	<Loadding v-bind:loadinghuan="isSpinShow"></Loadding>
  </Layout>
</template>

<script>
export default {
  data: function() {
    return {
	  isSpinShow: false,
      selectPermission: [],
      role: {
        roleName: '',
        autorId: '',
      },
      permissions: [],
      allPermissions: [],
    }
  },
  methods: {
    submit: function() {
      let self = this
      this.$data.permissions = []
      for (let index in this.$data.allPermissions) {
        let permission = this.$data.allPermissions[index]
        if (permission.indeterminate || permission.checked) {
          this.$data.permissions.push(permission.permissionId)

          for (let jndex in permission.children) {
            let subPermission = permission.children[jndex]
            if (subPermission.checked) {
              this.$data.permissions.push(subPermission.permissionId)
            }
          }
        }
      }

      if (this.$data.permissions.length === 0) {
        this.message.error('请选择权限')
        return
      }

      if (this.$data.role.roleName.length === 0) {
        this.message.error('请输入角色名')
        return
      }

      //将List<Integer> 转化成以逗号分隔的字符串 [1,2,3,4]  ---> 1,2,3,4
      var str = ''
      for (let item in this.$data.permissions) {
        var str = str.concat(this.$data.permissions[item] + ',')
      }
      var POJO = {
        'role.roleName': this.role.roleName,
        permissionIds: str.substr(0, str.length - 1),
        'role.cu': this.role.autorId,
      }
	  this.isSpinShow = true
      this.http
        .post({
          url: '/role',
          param: POJO,
        })
        .then((data) => {
		  this.isSpinShow = false
          self.message.info('添加成功')
          self.$tabs.close()
        })
    },
    cancel: function() {
      this.$tabs.close()
    },
    init: function() {
      this.searchPermission()
    },
    searchPermission: function() {
      let self = this
      this.http
        .get({
          url: '/permission/list',
        })
        .then((data) => {
          self.$data.allPermissions = []
          for (let index in data) {
            let permission = {}
            permission.title = data[index].name
            permission.expand = true
            permission.children = []
            permission.permissionId = data[index].permissionId

            for (let jndex in data[index].permissions) {
              let subPermission = {}
              subPermission.title = data[index].permissions[jndex].name
              subPermission.permissionId =
                data[index].permissions[jndex].permissionId
              permission.children.push(subPermission)
            }
            self.$data.allPermissions.push(permission)
          }
        })
    },
  },
  destroyed: function() {
    this.$router.push({
      name: 'role',
    })
  },
  mounted: function() {
    this.init()
    let currentUser = JSON.parse(sessionStorage.getItem('CURRENT_USER'))
    this.role.autorId = currentUser.user.userId
  },
}
</script>

<style></style>
